<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goBack"></i>
      <p>转账</p>
    </header>
    <div class="content">
      <div class="section">
        <div class="title">收款手机号</div>
        <input type="tel" v-model="targetPhoneNumber" placeholder="输入手机号" @input="validatePhone" />
        <div class="hint" :class="phoneValid ? 'ok' : 'err'">{{ phoneText }}</div>
      </div>
      <div class="section">
        <div class="title">转账金额</div>
        <input type="number" v-model.number="amount" placeholder="输入金额" />
      </div>
      <div class="section">
        <button class="confirm" :disabled="!canSubmit" @click="confirmTransfer">确认转账</button>
      </div>
      <div v-if="lastTxn" class="result">
        <div>已转账：{{ formatCurrency(lastTxn.amount) }}</div>
        <div>交易号：{{ lastTxn.transactionNo }}</div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Footer from '../components/Footer.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { walletApi } from '../api'

const router = useRouter()
const targetPhoneNumber = ref('')
const phoneValid = ref(false)
const phoneText = ref('请输入11位有效手机号')
const amount = ref()
const lastTxn = ref(null)

const canSubmit = () => Number(amount.value) > 0 && phoneValid.value
const formatCurrency = v => {
  const n = Number(v || 0)
  return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '元'
}

const confirmTransfer = async () => {
  const ok = window.confirm(`确认向手机号 ${targetPhoneNumber.value} 转账 ${formatCurrency(amount.value)} 吗？`)
  if (!ok) return
  const pw = window.prompt('请输入交易密码')
  if (!pw) return
  const res = await walletApi.transfer({ amount: amount.value, targetPhoneNumber: targetPhoneNumber.value, remark: '转账' })
  lastTxn.value = Array.isArray(res) ? res[1] : null
  await router.push('/wallet')
}

const goBack = () => router.push('/wallet')

const validatePhone = () => {
  const v = (targetPhoneNumber.value || '').trim()
  const ok = /^1[3-9]\d{9}$/.test(v)
  phoneValid.value = ok
  phoneText.value = ok ? '手机号格式正确' : '请输入11位有效手机号'
}
</script>

<style scoped>
.wrapper { width: 100%; min-height: 100%; }
header { width: 100%; height: 12vw; background-color: #0097ff; color: #fff; font-size: 4.8vw; position: fixed; left: 0; top: 0; z-index: 1000; display: flex; justify-content: center; align-items: center; }
header i { position: absolute; left: 3vw; font-size: 6vw; color: #fff; cursor: pointer; }
.content { margin-top: 14vw; padding: 4vw; }
.section { margin-bottom: 6vw; }
.title { font-size: 4vw; color: #666; margin-bottom: 2vw; }
input { width: 100%; height: 10vw; border: 1px solid #ddd; border-radius: 2vw; padding: 0 3vw; font-size: 4vw; }
.confirm { width: 100%; height: 10vw; border: none; border-radius: 2vw; background: #0097ff; color: #fff; font-size: 4vw; font-weight: 700; }
.result { background: #f7f7f7; border-radius: 2vw; padding: 3vw; font-size: 4vw; }
</style>
